<template>
    <el-dialog v-model="inDialog.show" :title= this.currentName >
      <AppSearchForm size="small" @submit="userSearch()" @reset="userReset()">
        <el-form-item>
          <el-input v-model="query.name" clearable placeholder="请输入用户名称" />
        </el-form-item>
      </AppSearchForm>
      <AppPageTable
        stripe
        ref="dialogTable"
        size="small"
        :data="table.data"
        :autostyle="'height:100%'"
        :option="table.option"
        @select="changeUserList($event)"
        @change="getUserList()"
      >
        <el-table-column type="selection" width="50px" />
        <el-table-column show-overflow-tooltip prop="username" label="账号" />
        <el-table-column show-overflow-tooltip prop="nickName" label="昵称" />
        <el-table-column show-overflow-tooltip prop="phone" label="手机号" />
        <el-table-column show-overflow-tooltip prop="sex" label="性别" >
          <template #default="scope">
            {{ scope.row.sex ? "女" : "男" }}
          </template>
        </el-table-column>        
      </AppPageTable>
      <template #footer>
        <span class="dialog-footer">
        </span>
      </template>
    </el-dialog>
  </template>
  
  <script>
  import { defineComponent } from "vue";
  import AppSearchForm from "@/components/AppSearchForm.vue";
  import AppPageTable, { useTableOption } from "@/components/AppPageTable2";
  export default defineComponent({
    components: { AppSearchForm, AppPageTable, AppSearchForm },
    props: {
        deptId:{
        type: [Number,String],

      },
      companyId:{
        type: [Number,String],
        },
        currentName:{
        type: String,
        },
      userList: {
        type: Array,
        default: () => [],
      },
      dialog:{
        type: Object,
        default: () => {},
      }
    },
    emits:["update:userList","update:dialog","toChangeUserList"],
    computed:{
      inUserList:{
          get(){
              return this.userList
          },
          set(value){
              this.$emit("update:userList")
          }
      },
      inDialog:{
          get(){
              return this.dialog
          },
          set(value){
              this.$emit("update:dialog")
          }
      },
  
    },
    data() {
      return {
        query: {
          name: "",
        },
        table: {
          data: [],
          option: useTableOption(),
        },
      };
    },
    methods: {
      getUserList() {
        this.table.option.loading = true;
        this.$http
          .get("/api/user/query", {
            KeyWords: this.query.name,
            CompanyId: this.companyId,
            DeptId : this.deptId,
            PageIndex: this.table.option.page,
            PageSize: this.table.option.pageSize,
          })
          .then((res) => {
            this.table.data = res.content;
            console.log(this.inUserList);
            this.$nextTick(() => {
              this.inUserList.forEach((item) => {
                let sameIndex = this.table.data.findIndex((t) => {
                  return t.id == item.id;
                });
                if (sameIndex != -1) {
                  this.$refs.dialogTable.$refs.tableRef.toggleRowSelection(
                    this.table.data[sameIndex],
                    true
                  );
                }
              });
            });
            this.table.option.total = res.totalElements;
          })
          .finally(() => (this.table.option.loading = false));
      },
      userSearch() {
        this.table.option.page = 1;
        this.getUserList();
      },
      userReset() {
        this.table.option.page = 1;
        this.query.name = "";
        this.getUserList();
      },
    //   submitDialog() {
    //       this.inDialog.btnLoading = true;
    //       this.$http
    //         .post("/api/userRole/addUserRole", {
    //           roleId: this.roleId,
    //           userIdList: this.table.option.selected.map((t) => {
    //             return t.id;
    //           }),
    //         })
    //         .then((res) => {
    //           if (res.status) {
    //             this.$message.success(res.message);
    //             this.$emit("toChangeUserList");
    //             this.getUserList();
    //             this.inDialog.show = false;
    //           } else {
    //             this.$message.error(res.message);
    //           }
    //         })
    //         .finally(() => (this.inDialog.btnLoading = false));
    //   },

      changeUserList({selection,row}){
          let changeIndex=this.inUserList.findIndex(t=>{
              return t.id==row.id
          })
          if(changeIndex!=-1){
              this.inUserList.splice(changeIndex,1)
          }else{
              this.inUserList.push(row)
          }
      }
    },
    watch:{
      "inDialog.show"(newVal){
        if(newVal){
          this.getUserList()
        }
      }
    },
    mounted() {},
  });
  </script>
  
  <style lang="scss" scoped></style>
  